import { Button, Divider, Space } from '@mao-fu/sun-ui';
import React from 'react';

const App: React.FC = () => {
  return (
    <div>
      <h4>水平分割线 带内容</h4>
      <Space display="flex" direction="vertical" align="normal">
        <div>
          <Button>按钮</Button>
          <Divider children="左对齐 分割线内容" type="solid" align="left" />
          <Button>按钮</Button>
        </div>
        <div>
          <Button>按钮</Button>
          <Divider
            children="居中对齐 分割线内容"
            type="dashed"
            align="center"
          />
          <Button>按钮</Button>
        </div>
        <div>
          <Button>按钮</Button>
          <Divider children="右对齐 分割线内容" type="dotted" align="right" />
          <Button>按钮</Button>
        </div>
        <div>
          <Button>按钮</Button>
          <Divider
            children="自定义宽度 分割线内容"
            type="dotted"
            align={[undefined, 100]}
          />
          <Button>按钮</Button>
        </div>
        <div>
          <Button>按钮</Button>
          <Divider
            children="自定义宽度 分割线内容"
            type="dotted"
            align={[100, 100]}
          />
          <Button>按钮</Button>
        </div>
      </Space>
    </div>
  );
};

export default App;
